<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>分期收款</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--<link rel="stylesheet" href="css/mui.min.css">-->
		<link rel="stylesheet" href="../css/mui.min.css" />
	</head>
	<style type="text/css">
		.mui-bar-nav~.mui-content .mui-pull-top-pocket {
			top: 0;
		}
		
		.nav_btn {
			width: 50%;
			float: left;
			color: black;
		}
		
		.nav_button {
			padding-top: 50px;
			width: 80%;
			margin: 0 auto;
		}
		
		.hidden {
			display: none;
		}
		
		input[type="text"] {
			font-size: 14px;
		}
		
		.mui-input-group .mui-input-row {
			padding: 10px 0;
			height: auto;
		}
		
		.mui-input-row label {
			text-align: center;
		}
		
		#loan {
			margin-top: 44px;
		}
		
		.fenqi {
			width: 90%;
			margin: 0 auto;
			padding: 8px;
		}
		
		.mui-backdrop {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 998;
			background-color: rgba(0, 0, 0, .3);
		}
		
		#qrcode {
			width: 300px;
			height: 300px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -150px;
			margin-top: -150px;
			padding: 20px;
		}
		
		#qrcode img {
			width: 100%;
		}
		
		.none {
			display: none;
		}
		
		.mui-popup-button.mui-popup-button-bold {
			font-weight: 100;
		}
		
		.active {
			color: #007aff !important;
		}
	</style>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">花呗分期付款</h1>
		</header>
		<div class="nav_button" style="line-height: 40px;text-align: center;">
			<a type="button" class="nav_btn active">分期付款</a>
			<a type="button" class="nav_btn">分期账单</a>
		</div>
		<div id="loan">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>分期金额</label>
					<input type="number" class="price" placeholder="请输入分期金额">
				</div>
				<div class="mui-input-row">
					<label>分期时限</label>
					<div class="mui-btn" id="time" style="border: 0;width: 65%;text-align: right;">
						<span>请选择分期期数</span>
						<span class="mui-icon mui-icon-arrowright time"></span>
					</div>
				</div>
				<div class="mui-input-row">
					<label>手续费率<br>承担方</label>
					<div class="mui-btn" id="obj" style="border: 0;width: 65%;text-align: right;padding: 21.5px 15px;">
						<span>请选择承担方</span>
						<span class="mui-icon mui-icon-arrowright obj"></span>
					</div>
				</div>
			</form>
			<button class="mui-btn mui-btn-success mui-btn-block fenqi loan" style="margin-top: 30px;">扫码分期</button>
			<!--<button class="mui-btn mui-btn-success mui-btn-block fenqi">生成二维码</button>-->
		</div>
		<!--二维码区域-->
		<div class="qrcode none">
			<div id="qrcode" style="background-color: white;">

			</div>
		</div>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper hidden" style="padding-top: 0;margin-top: 88px;">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">

				</ul>
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for(var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			var loan_time = "";
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for(var i = cells.length, len = i + 20; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						table.appendChild(li);
					}
				}, 1500);
			}
			mui.plusReady(function() {
				Bluetooth();
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				}, 1000);

			});

			//点击扫码分期
			mui("body").on("tap", ".fenqi", function(e) {
				$("input").blur();
				var loan_qishu = "";
				if(loan_time == 1) {
					loan_qishu = 3;
				} else if(loan_time == 2) {
					loan_qishu = 6;
				} else if(loan_time == 3) {
					loan_qishu = 12;
				}

				if($(this).hasClass("loan")) {
					if(loan_qishu != "" && ($(".price").val() != "") && ($("#time span:first-child").html() != "请选择分期期数") && ($("#obj span:first-child").html() != "请选择承担方")) {
						//判断金额是不是合法数字
						var exp = /^[0-9]+(.[0-9]{1,2})?$/;
						if(!exp.test($(".price").val())) {
							mui.alert("分期金额不合法", " ", "关闭", function() {}, "div");
							return false;
						}
						//如果金额为0
						if (!($(".price").val()*1>0)) {
							mui.alert("分期金额不能为0", " ", "关闭", function() {}, "div");
							return false;
						}
						
						fq_datas = {
							token: localStorage.getItem("token"),
							total_amount: $(".price").val(),
							hb_fq_num: loan_qishu,
							hb_fq_seller_percent: ($("#obj span:first-child").html() == "顾客") ? 0 : 100
						}
						mui.openWindow({
							url: "public/barcode_scan3.html",
							id: "barcode_scan3",
							extras: fq_datas
						})
					} else if($(".price").val() == "") {
						mui.alert("分期金额不能为空！", " ", "确认", function() {}, "div");
					} else if($("#time span:first-child").html() == "请选择分期期数") {
						mui.alert("请选择分期期数！", " ", "确认", function() {}, "div");
					} else if($("#obj span:first-child").html() == "请选择承担方") {
						mui.alert("请选择承担方！", " ", "确认", function() {}, "div");
					}
				} else {
					if(($(".price").val() != "") && ($("#time").html() != "请选择分期期数") && ($("#obj").html() != "请选择承担方")) {
						console.log(loan_time);
						require(weburl + model_code, "json", "post", {
							token: localStorage.getItem("token"),
							total_amount: $(".price").val(),
							hb_fq_num: loan_time,
							hb_fq_seller_percent: ($("#obj span:first-child").html() == "顾客") ? 0 : 100
						}, function(response) {
							if(response.status == "success") {
								$("#qrcode").html("");
								var qrcodeClass = $(".qrcode");
								qrcodeClass.removeClass("none");
								qrcodeClass.addClass("mui-backdrop");
								var qrcode = new QRCode(document.getElementById("qrcode"), {
									width: 260, //设置宽高
									height: 260
								});
								qrcode.makeCode(response.data[0].code_url);
							} else {
								mui.alert("token有误，请重新登陆", " ", "确认", function() {}, "div");
							}
						}, function() {

						})
					} else if($(".price").val() == "") {
						mui.alert("分期金额不能为空！", " ", "确认", function() {}, "div");
					} else if($("#time").html() == "请选择分期期数") {
						mui.alert("请选择分期期数！", " ", "确认", function() {}, "div");
					} else if($("#obj").html() == "请选择承担方") {
						mui.alert("请选择承担方！", " ", "确认", function() {}, "div");
					}
				}

			})

			//点击选择分期
			mui("body").on("tap", "#time", function() {
				$(".price").blur();
				mui.confirm("请选择分期期数", " ", ["6个月", "12个月"], function(e) {
					loan_time = e.index + 1;
					switch(e.index) {
						case 0:
							$("#time span:first-child").html("6个月");
							break;
						case 1:
							$("#time span:first-child").html("12个月");
							break;
					}
				}, "div");
			})

			//点击选择承担方
			mui("body").on("tap", "#obj", function() {
				$(".price").blur();
				mui.confirm("请选择承担方", " ", ["顾客", "商家"], function(e) {
					switch(e.index) {
						case 0:
							$("#obj span:first-child").html("顾客");
							break;
						case 1:
							$("#obj span:first-child").html("商家");
							break;
					}
				}, "div");
			})

			//点击遮罩层隐藏
			mui("body").on("tap", ".qrcode", function() {
				var qrcodeAddClass = $(".qrcode");
				qrcodeAddClass.addClass("none");
				qrcodeAddClass.removeClass("mui-backdrop");
			})

			//点击分期账单按钮
			mui("body").on("tap", ".nav_btn", function() {
				if($(this).index() == 1) {
					mui.openWindow({
						url: "fenqiDetail.html",
						id: "fenqiDetail",
						extras: {
							sign: 106
						}
					})
					mui.openWindow("fenqiDetail.html", "fenqiDetail");
				}
			})
		</script>
	</body>

</html>